<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="tabsOne" name="first">
        <template v-if="$slots.first">
          <slot name="first" />
        </template>
      </el-tab-pane>
      <el-tab-pane :label="tabsTwo" name="second">
        <template v-if="$slots.second">
          <slot name="second" />
        </template>
      </el-tab-pane>
      <el-tab-pane :label="tabsThree" name="third">
        <template v-if="$slots.third">
          <slot name="third" />
        </template>
      </el-tab-pane>
      <el-tab-pane :label="tabsFour" name="fourth">
        <template v-if="$slots.fourth">
          <slot name="fourth" />
        </template>
      </el-tab-pane>
      <el-tab-pane :label="tabsFive" name="fifth">
        <template v-if="$slots.fifth">
          <slot name="fifth" />
        </template>
      </el-tab-pane>
      <el-tab-pane :label="tabsSix" name="sixth">
        <template v-if="$slots.sixth">
          <slot name="sixth" />
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: {
    tabsOne: {
      type: String,
      default: "",
    },
    tabsTwo: {
      type: String,
      default: "",
    },
    tabsThree: {
      type: String,
      default: "",
    },
    tabsFour: {
      type: String,
      default: "",
    },
    tabsFive: {
      type: String,
      default: "",
    },
    tabsSix: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      activeName: "first",
    };
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
    },
  },
};
</script>
